<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>新冠肺炎疫情地图</title>
        <style>
            #demo-wrapper {
                max-width: 1000px;
                margin: 0 auto;
                height: 560px;
            }

            #mapBox,
            #container_china{
                width: 80%;
                float: left;
            }

            #container,
            #container_china {
                height: 500px;
            }

            #up {
                height: 20px;
                max-width: 400px;
                margin: 0 auto;
            }

            #up a {
                cursor: pointer;
                padding-left: 40px;
            }

            .selector {
                height: 40px;
                max-width: 400px;
                margin: 0 auto;
                position: relative;
            }

            .selector .prev-next {
                position: absolute;
                padding: 0 10px;
                font-size: 30px;
                line-height: 20px;
                background: white;
                font-weight: bold;
                color: #999;
                top: -2px;
                display: none;
                border: none;
            }

            .selector .custom-combobox {
                display: block;
                position: absolute;
                left: 40px;
                right: 110px;
            }

            .selector .custom-combobox .custom-combobox-input {
                position: absolute;
                font-size: 14px;
                color: silver;
                border-radius: 0;
                height: 24px;
                display: block;
                /*     background: url(http://api.highcharts.com/resources/images/search.png) 5px 5px no-repeat white; */
                padding: 1px 5px 1px 30px;
                width: 100%;
            }

            .selector .custom-combobox .ui-autocomplete-input:focus {
                color: black;
            }

            .selector .custom-combobox .ui-autocomplete-input.valid {
                color: black;
            }

            .selector .custom-combobox-toggle {
                position: absolute;
                display: block;
                right: -78px;
                border-radius: 0;
            }

            .selector #btn-next-map {
                right: -12px;
            }

            .ui-autocomplete {
                max-height: 500px;
                overflow: auto;
            }

            .ui-autocomplete .option-header {
                font-style: italic;
                font-weight: bold;
                margin: 5px 0;
                font-size: 1.2em;
                color: gray;
            }

            .loading {
                margin-top: 10em;
                text-align: center;
                color: gray;
            }

            .ui-button-icon-only .ui-button-text {
                height: 26px;
                padding: 0 !important;
                background: white;
            }

            #infoBox .button {
                border: none;
                border-radius: 3px;
                background: #a4edba;
                padding: 5px;
                color: black;
                text-decoration: none;
                font-size: 12px;
                white-space: nowrap;
                cursor: pointer;
                margin: 0 3px;
                line-height: 30px;
            }

            @media (max-width: 768px) {
                #demo-wrapper {
                    width: auto;
                    height: auto;
                }

                #mapBox {
                    width: auto;
                    float: none;
                }

                #container {
                    height: 310px;
                }

                #sideBox {
                    float: none;
                    width: auto;
                    margin-top: 0;
                    border-left: none;
                    border-top: 1px solid silver;
                }

                /*
                .selector {
                width: 300px;
            }
                .selector .custom-combobox .custom-combobox-input {
                width: 190px;
            }
                .selector .custom-combobox-toggle {
                left: 226px;
            }
                .selector #btn-next-map {
                left: 310px;
            }
                */
            }
        </style>
        <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://code.highcharts.com.cn/highmaps/highmaps.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    </head>
    <body>
        <!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
        <script src="https://img.hcharts.cn/mapdata/index.js"></script>
        <script src="https://img.hcharts.cn/libs/jquery-ui/jquery-ui.js"></script>
        <script src="https://img.hcharts.cn/static/common/jquery.combobox.js"></script>
        <link href="https://img.hcharts.cn/libs/jquery-ui/themes/base/jquery-ui.css" rel="stylesheet">
        <link href="https://img.hcharts.cn/libs/font-awesome/css/font-awesome.css" rel="stylesheet">
        <div id="demo-wrapper">
            <div id="mapBox" style="display: block">
                <div id="up"></div>
                <div class="selector">
                    <button id="btn-prev-map" class="prev-next"><i class="fa fa-angle-left"></i></button>
                    <select id="mapDropdown" class="ui-widget combobox"></select>
                    <button id="btn-next-map" class="prev-next"><i class="fa fa-angle-right"></i></button>
                </div>
                <div id="container"></div>
            </div>
            <div id="container_china" style="display: none"></div>
        </div>
        <script>
            $(function () {
                var href_splits = window.location.href.split("/");
                if (href_splits[href_splits.length - 1] == 'cn-all') {
                    //  显示中国地图
                    $("#mapBox").attr("style","display:none;");
                    $("#container_china").attr("style","display:block;");
                }
                /**
                 * This is a complicated demo of Highmaps, not intended to get you up to speed
                 * quickly, but to show off some basic maps and features in one single place.
                 * For the basic demo, check out http://www.highcharts.com/maps/demo/geojson instead.
                 */
                    // Base path to maps
                    //  世界地图
                var baseMapPath = "https://img.hcharts.cn/mapdata/",
                    showDataLabels = false, // Switch for data labels enabled/disabled
                    mapCount = 0,
                    searchText,
                    mapOptions = '';
                // Populate dropdown menus and turn into jQuery UI widgets
                $.each(Highcharts.mapDataIndex, function (mapGroup, maps) {
                    if (mapGroup !== "version") {
                        mapOptions += '<option class="option-header">' + mapGroup + '</option>';
                        if (mapGroup === 'Countries') {
                            delete maps.Taiwan;
                        }
                        $.each(maps, function (desc, path) {
                            mapOptions += '<option value="' + path + '">' + desc + '</option>';
                            mapCount += 1;
                        });
                    }
                });
                searchText = 'Search ' + mapCount + ' maps';
                mapOptions = '<option value="custom/world.js">' + searchText + '</option>' + mapOptions;
                $("#mapDropdown").append(mapOptions).combobox();
                // Change map when item selected in dropdown
                $("#mapDropdown").change(function () {
                    var $selectedItem = $("option:selected", this),
                        mapDesc = $selectedItem.text(),
                        mapKey = this.value.slice(0, -3),
                        svgPath = baseMapPath + mapKey + '.svg',
                        geojsonPath = baseMapPath + mapKey + '.geo.json',
                        javascriptPath = baseMapPath + this.value,
                        isHeader = $selectedItem.hasClass('option-header');
                    // Dim or highlight search box
                    // Dim or highlight search box
                    if (mapDesc === searchText || isHeader) {
                        $('.custom-combobox-input').removeClass('valid');
                        location.hash = '';
                    } else {
                        $('.custom-combobox-input').addClass('valid');
                        location.hash = mapKey;
                    }
                    if (isHeader) {
                        return false;
                    }
                    // Show loading
                    if ($("#container").highcharts()) {
                        $("#container").highcharts().showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
                    }

                    // When the map is loaded or ready from cache...
                    function mapReady() {
                        var mapGeoJSON = Highcharts.maps[mapKey],
                            data = [],
                            parent,
                            match;
                        // Generate non-random data for the map
                        $.each(mapGeoJSON.features, function (index, feature) {
                            data.push({
                                key: feature.properties['hc-key'],
                                value: index
                            });
                        });
                        console.log(data);
                        // Show arrows the first time a real map is shown
                        if (mapDesc !== searchText) {
                            $('.selector .prev-next').show();
                            $('#sideBox').show();
                        }
                        // Is there a layer above this?
                        match = mapKey.match(/^(countries\/[a-z]{2}\/[a-z]{2})-[a-z0-9]+-all$/);
                        if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country
                            parent = {
                                desc: 'World',
                                key: 'custom/world'
                            };
                        } else if (match) { // admin1
                            parent = {
                                desc: $('option[value="' + match[1] + '-all.js"]').text(),
                                key: match[1] + '-all'
                            };
                        }
                        $('#up').html('');
                        if (parent) {
                            $('#up').append(
                                $('<a><i class="fa fa-angle-up"></i> ' + parent.desc + '</a>')
                                    .attr({
                                        title: parent.key
                                    })
                                    .click(function () {
                                        $('#mapDropdown').val(parent.key + '.js').change();
                                    })
                            );
                        }
                        // Instantiate chart
                        $("#container").highcharts('Map', {
                            title: {
                                text: null
                            },
                            mapNavigation: {
                                enabled: true
                            },
                            colorAxis: {
                                min: 0,
                                stops: [
                                    [0, '#EFEFFF'],
                                    [0.5, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
                                ]
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'left',
                                verticalAlign: 'bottom'
                            },
                            tooltip: {
                                useHTML: true,
                                headerFormat: '<table><tr><td>{point.name}</td></tr>',
                                pointFormat: '<tr><td>全称</td><td>{point.name}</td></tr>' +
                                    '<tr><td>数值</td><td>{point.value}</td></tr>',
                                footerFormat: '</table>'
                            },
                            series: [{
                                data: data,
                                mapData: mapGeoJSON,
                                joinBy: ['hc-key', 'key'],
                                states: {
                                    hover: {
                                        color: Highcharts.getOptions().colors[2]
                                    }
                                },
                                point: {
                                    events: {
                                        // On click, look for a detailed map
                                        click: function () {
                                            var key = this.key;
                                            $('#mapDropdown option').each(function () {
                                                if ('cn' == key) {
                                                    //  显示中国地图
                                                    $("#mapBox").attr("style","display:none;");
                                                    $("#container_china").attr("style","display:block;");
                                                }
                                                if (this.value === 'countries/' + key.substr(0, 2) + '/' + key + '-all.js') {
                                                    $('#mapDropdown').val(this.value).change();
                                                }
                                            });
                                        }
                                    }
                                }
                            }, {
                                type: 'mapline',
                                name: "Separators",
                                data: Highcharts.geojson(mapGeoJSON, 'mapline'),
                                nullColor: 'gray',
                                showInLegend: false,
                                enableMouseTracking: false
                            }]
                        });
                        showDataLabels = $("#chkDataLabels").attr('checked');
                    }

                    // Check whether the map is already loaded, else load it and
                    // then show it async
                    if (Highcharts.maps[mapKey]) {
                        mapReady();
                    } else {
                        $.getScript(javascriptPath, mapReady);
                    }
                });
                // Toggle data labels - Note: Reloads map with new random data
                $("#chkDataLabels").change(function () {
                    showDataLabels = $("#chkDataLabels").attr('checked');
                    $("#mapDropdown").change();
                });
                // Switch to previous map on button click
                $("#btn-prev-map").click(function () {
                    $("#mapDropdown option:selected").prev("option").prop("selected", true).change();
                });
                // Switch to next map on button click
                $("#btn-next-map").click(function () {
                    $("#mapDropdown option:selected").next("option").prop("selected", true).change();
                });
                // Trigger change event to load map on startup
                if (location.hash) {
                    $('#mapDropdown').val(location.hash.substr(1) + '.js');
                } else { // for IE9
                    $($('#mapDropdown option')[0]).attr('selected', 'selected');
                }
                $('#mapDropdown').change();

                //  中国地图
                Highcharts.setOptions({
                    lang: {
                        drillUpText: '< 返回 “{series.name}”'
                    }
                });
                var map_china = null,
                    geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
                $.getJSON(geochina + 'china.json&callback=?', function (mapdata) {
                    var data = [];
                    // 随机数据
                    Highcharts.each(mapdata.features, function (md, index) {
                        var tmp = {
                            name: md.properties.name,
                            value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
                        };
                        if (md.properties.drilldown) {
                            tmp.drilldown = md.properties.drilldown;
                        }
                        data.push(tmp);
                    });
                    var level = 1;
                    map_china = new Highcharts.Map('container_china', {
                        chart: {
                            events: {
                                drilldown: function (e) {
                                    this.tooltip.hide();
                                    // 异步下钻
                                    if (level == 1 && e.point.drilldown) {
                                        level = 2;
                                        var pointName = e.point.properties.fullname;
                                        map_china.showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
                                        // 获取二级行政地区数据并更新图表
                                        $.getJSON(geochina + e.point.drilldown + '.json&callback=?', function (data) {
                                            data = Highcharts.geojson(data);
                                            Highcharts.each(data, function (d) {
                                                if (d.properties.drilldown) {
                                                    d.drilldown = d.properties.drilldown;
                                                }
                                                d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                                            });
                                            map_china.hideLoading();
                                            map_china.addSeriesAsDrilldown(e.point, {
                                                name: e.point.name,
                                                data: data,
                                                dataLabels: {
                                                    enabled: true,
                                                    format: '{point.name}'
                                                }
                                            });
                                            map_china.setTitle({
                                                text: pointName
                                            });
                                        });
                                    }
                                },
                                drillup: function () {
                                    level = 1;
                                    map_china.setTitle({
                                        text: '中国'
                                    });
                                }
                            }
                        },
                        title: {
                            text: '中国地图'
                        },
                        subtitle: {
                            useHTML: true,
                            text: '返回<a href="/" target="_self">世界地图</a>'
                        },
                        mapNavigation: {
                            enabled: true
                        },
                        colorAxis: {
                            min: 0,
                            stops: [
                                [0, '#EFEFFF'],
                                [0.5, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
                            ]
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'left',
                            verticalAlign: 'bottom'
                        },
                        tooltip: {
                            useHTML: true,
                            headerFormat: '<table><tr><td>{point.name}</td></tr>',
                            pointFormat: '<tr><td>全称</td><td>{point.name}</td></tr>' +
                                '<tr><td>数值</td><td>{point.value}</td></tr>',
                            footerFormat: '</table>'
                        },
                        series: [{
                            data: data,
                            mapData: mapdata,
                            joinBy: 'name',
                            name: '中国地图',
                            states: {
                                hover: {
                                    color: '#a4edba'
                                }
                            }
                        }]
                    });
                });
            });
        </script>
    </body>
</html>